import React, { FC } from 'react';
import { Outlet, useMatch } from 'react-router-dom';
import { CustomLink } from '@/components';
import avatar from '@/assets/avatar.jpg';
import './index.less';

export { Info } from './info';
export { Love } from './love';

export const Center: FC = () => {
  const match = useMatch('/center/love');
  console.log(match);

  return (
    <div className='person-center'>
      <div className='sidebar'>
        <div className='info'>
          <img src={ avatar } alt="" />
          <p>Jess</p>
        </div>
        <div className='menu'>
          <CustomLink className='menu-item' to="/center/info">个人信息</CustomLink>
          <CustomLink className='menu-item' to="/center/love">我的喜欢</CustomLink>
        </div>
        <div className='menu'>
          <a className='menu-item'>退出登录</a>
        </div>
      </div>
      <div className='dashboard'>
        <Outlet />
      </div>
    </div>
  );
};
